<template>
    <el-row class="hg100 row">
        <el-col>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>劳动课程</el-breadcrumb-item>
                <el-breadcrumb-item>{{lineForm.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col class="box box-pack-between bgf mt10">
            <div class="left box box-pack-between box-align-center">
                <el-image :src="lineForm.image" class="img"></el-image>
                <div class="name">
                    <h2 class="bold course-name tl">{{lineForm.name}}</h2>
                    <div class="zb mt20 tl">
                        责任编辑 ：{{lineForm.chiefEditor}}
                    </div>
                </div>
            </div>
            <div class="right box box-tb box-pack-start box-align-end">
                <span class="cbs">{{lineForm.material}}</span>
            </div>
        </el-col>
        <el-col class="mt20 bgf">
            <el-col class="box box-pack-start box-algin-center">
                <div class="tab cp" :class="{active:i == current}" v-for="(item,i) in tabList" :key="i"
                    @click="changeTab(i)">{{item.title}}</div>
            </el-col>
            <el-col>
                <el-divider></el-divider>
                <el-col class="shi">
                    <chaper-view v-if="current == 1" :cousid="cousid" ></chaper-view>
                    <teach-base v-if="current == 0" :cousinfo="lineForm" ></teach-base>
                </el-col>
            </el-col>
        </el-col>
    </el-row>
</template>

<script>
    import chaperView from './components/chaper.vue';
    import teachBase from './components/teachBase.vue';
    export default {
        components: {
            chaperView,
            teachBase,
        },
        data() {
            return {
                tabList: [{
                        title: "课程详情"
                    },
                    {
                        title: "章节目录"
                    }
                ],
                current: 0,
                lineForm: {},
                cousid:this.$route.query.id
            };
        },
        mounted() {
            this.getinfo();
        },
        methods: {
            getinfo(){
                  this.$api.jyz.cousInfo({
                      'cousid': this.cousid
                  }).then(res => {
                      if (res.code == '0') {
                          console.log(res.data)
                          this.lineForm=res.data;
                          // this.lineForm.id = res.data.id;
                          // this.lineForm.name = res.data.name;
                          // this.lineForm.img = res.data.image;
                          // this.lineForm.material = res.data.material;
                          // this.lineForm.target = res.data.target;
                          // this.lineForm.info = this.editor.txt.html(res.data.info);
                          this.lineForm.zbname = res.data.chiefEditor;
                      } else {
                          this.$message.error('请求失败！');
                      }
                  })
            },
            changeTab(i) {
                this.current = i
            },
            clickEdit() {
                this.$router.push({
                    path:"/ldkc_jyzz/bjkc_jyzz"
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    .bgf {
        background-color: #fff;
    }

    .left {
        padding: 10px 0;
        // width: 340px;
        background-color: #fff;

        .img {
            width: 218px;
            height: 120px;
            border-radius: 7px;
        }

        .bold {
            font-size: 18px;
        }

        .name {
            padding-left: 20px;
            width: 400px;

            .edit {
                width: 76px;
                height: 26px;
                background: #FEF8F2;
                border: 1px solid #FF9B4F;
                border-radius: 13px;
                color: #FF9B4F;
                line-height: 26px;
                cursor: pointer;
            }
        }
    }

    .right {
        padding-right: 20px;

        .cbs {
            margin-top: 20px;
            width: 140px;
            height: 24px;
            line-height: 24px;
            background: #F3F4FB;
            border-radius: 12px;
            color: #939FF4;
        }

        .zb {
            width: 100%;
            color: #2F3142;
            font-weight: 600;
        }
    }

    .tab {
        margin: 0 20px;
        padding: 20px 0;
        border-bottom: 4px solid #fff;

        //         border-bottom: 4px solid #626BF1;
        &.active {
            border-bottom: 4px solid #626BF1;
        }

        &:hover {}
    }

    .bgf>>>.el-divider--horizontal {
        margin: 0 20px;
        width: auto;
    }

    .row {
        box-sizing: border-box;
    }

    .hg100 {
        height: 100%;
    }

    .shi {
        position: absolute;
        top:251px;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .course-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
